<template>
  <div class="tree_wrap tree_comp_checkbox_wrap">
    <el-tree
      :data="treeData"
      show-checkbox
      :node-key="nodeKey"
      :default-expand-all="expandAll"
      check-strictly
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-on-click-node="false"
      ref="treeCheckbox"
      :props="{ label: labelKey }"
      @node-click="nodeClickCallback"
    >
      <span class="custom-tree-node" slot-scope="{ node }">
        <span class="tree_node" :title="node.label">
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "treeCompCheckbox",
  props: {
    treeData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 节点唯一key，点击节点需要返回的字段
    nodeKey: {
      type: String,
      default: "code",
    },
    // 节点显示文本的字段
    labelKey: {
      type: String,
      default: "value",
    },
    checkedAll: {
      type: Boolean,
      default: false,
    },
    defaultCheckedKeys: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 默认展开的节点 nodeKey
    defaultExpandedKeys: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 默认展开所有的节点
    // 若需要 默认展开节点 请传入false
    expandAll: {
      type: Boolean,
      default: true,
    },
    // 点击父节点是否选中子节点，默认开启
    checkChildNode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      maxexpandId: 1000,
      checkedId: [],
      checkedData: "",
      checkedCode: [],
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      if (this.checkedAll) {
        this.$refs.treeCheckbox.setCheckedNodes(this.treeData);
      }
      console.log(this.defaultCheckedKeys);
      if (this.defaultCheckedKeys.length > 0) {
        // 调用组件默认触发回调函数
        this.$emit("node-click-callback", this.defaultCheckedKeys, null);
      }
    });
  },
  watch: {
    // defaultCheckedKeys: {
    //     handler: function (val, oVal) {
    //         console.log(val);
    //         console.log(this.$refs);
    //         this.$refs.treeCheckbox.setCheckedNodes(val);
    //         this.$emit("node-click-callback", val, null);
    //     },
    //     deep: true,
    //     immediate:true
    // },
  },
  methods: {
    setCheckedData() {
      // console.log(this.defaultCheckedKeys[0]);
    },
    getCheckedKeys(curCheckCode) {
      this.checkedCode = this.$refs.treeCheckbox.getCheckedKeys();
      this.$emit("node-click-callback", this.checkedCode, curCheckCode);
    },
    nodeClickCallback(node) {
      var checked = node.checked;
      node.checked = !checked;
      if (this.checkChildNode) {
        this.setChildNodesChecked(node, checked);
      }
      var curCheckCode = node.data.code;
      this.getCheckedKeys(curCheckCode);
      // setTimeout(() => {
      // },500)
    },
    setChildNodesChecked(node, checked) {
      if (node.childNodes.length > 0) {
        node.childNodes.forEach((item) => {
          item.checked = !checked;
          this.setChildNodesChecked(item, checked);
        });
      } else {
        return;
      }
    },
  },
};
</script>

<style scoped lang="less">
.tree_wrap {
  width: 100%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/deep/.el-tree-node__expand-icon {
  // display: none;
}
/deep/.el-tree-node__content > label.el-checkbox {
  pointer-events: none;
}

.tree_comp_checkbox_wrap {
  /deep/.custom-tree-node {
    width: 75%;
  }
  /deep/.tree_node {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
